<script setup>
// ========= 导入全局数据 ========= //
import { api_personalized } from '@/global/api'

// ========= 导入路由 ========= //
import { useRouter } from 'vue-router'

// ========= 导入卡片组件 ========= //
import Card from '@/components/Card.vue'

// & 获取路由对象
const router = useRouter()

/**
 * @description: 路由数据添加函数
 * @param {*} name
 * @param {*} query
 * @return {*}
 */
const list_push = (id) => {
	router.push({
		name: 'playlist',
		query: {
			id
		}
	})
}

/**
 * @description: 跳转到singer并携带id
 * @param {*} name
 * @param {*} query
 * @return {*}
 */
const singer_push = (id) => {
	router.push({
		name: 'singer',
		query: {
			id
		}
	})
}

// & 歌单数据
let song__list = await api_personalized(10)
</script>

<template>
	<div class="home">
		<div class="home__left">
			<div class="title">推荐</div>

			<div class="home__left_card big" @click="singer_push('1047282')">
				<img src="/冷鸟.jpg" alt="" />
				<p>
					For <br />
					You
				</p>
				<span>个人推荐</span>
			</div>

			<div class="home_temp">
				<div class="home__left_card">
					<img src="/每日30首.png" alt="" />
					<p>
						Daily <br />
						30
					</p>
					<span>每日30首</span>
				</div>
				<div class="home__left_card">
					<img src="/新歌推荐.png" alt="" />
					<p>New</p>
					<span>新歌推荐</span>
				</div>
			</div>
		</div>
		<div class="home__right">
			<Card
				card__title="你的歌单补贴"
				:list="song__list"
				@card_click="list_push"
			/>
		</div>
	</div>
</template>
<style scoped>
.home {
	--home_h: 100%;

	height: 100%;
	display: grid;
	grid-template-columns: 16rem 1fr;
	grid-template-rows: 100%;
	grid-column-gap: 100px;

	padding: 1rem 2.75rem;
}

.home__left > .title {
	font-weight: 400;
	font-size: 36px;
	line-height: 44px;

	color: #000000;
}

.home_temp {
	display: flex;
	justify-content: space-between;
}

.home__left_card {
	height: 150px;
	position: relative;
	margin: 0.4rem 0;

	cursor: pointer;
}

.home__left_card.big {
	width: 100%;
}

.home__left_card.big img {
	width: 100%;
}

.home__left_card img {
	width: 124px;
	height: 124px;
	object-fit: cover;
	border-radius: 12px;
}

.home__left_card p {
	position: absolute;
	top: 10px;
	left: 15px;
	font-weight: 700;
	font-size: 20px;
	color: #fff;
}

.home__left_card.big p {
	color: #ce8585;
}

.home__right {
	width: 100%;
	height: var(--home_h);
}
</style>
